
/* 
    获取元素：
*/

let li=document.querySelectorAll('.sort-nav li') //得到li
let span=document.querySelector('.api-seo1 span') //得到span
let input=document.querySelector('.api-seo1 input') //得到input

/*  
    需求1：
    当鼠标移入li的时候
    li的背景色变成蓝色，里面的文字变成蓝色
*/

 li.forEach(function(dom){
     dom.addEventListener('mouseover',function(){
         dom.style.borderColor='#00bdff'
         dom.firstElementChild.style.color='#00bdff'
        // console.log(dom.firstElementChild);
     })

     dom.addEventListener('mouseout',function(){
        dom.style.borderColor='#ccc'
        dom.firstElementChild.style.color='black'
       // console.log(dom.firstElementChild);
    })
 })
 
 /*  
    需求2：
    当鼠标点击li的时候
    li里面a的textContent的值传入api-seo1里面的span 里面的值
*/


li.forEach(function(dom){
    dom.addEventListener('click',function(){
      //  console.log(dom.firstElementChild.textContent);  //得到a里面的值
    let li2=dom.firstElementChild.textContent   
    span.textContent=li2
    input.value=li2   
    //$('#user-name').attr('placeholder','textContent')
    //input.placeholder.textContent.setAttribute('placeholder','li2');
    })
})